import { CaseConfigType } from '@shared';
import { BasicComponent } from './basic/basic.component';
import { StatusComponent } from './status/status.component';
import { CustomDotComponent } from './custom-dot/custom-dot.component';
import { ModeComponent } from './mode/mode.component';
import { ComplexComponent } from './complex/complex.component';
import { ReverseComponent } from './reverse/reverse.component';
import { CustomPositionComponent } from './custom-position/custom-position.component';

export const TimelineConfig: CaseConfigType = {
  location: 'Timeline',
  component: [
    {
      demo: BasicComponent,
      codePath: `showcase/timeline/basic/basic.component`,
      demoTitle: `基本用法`,
      demoTitle_en: `Basic`,
      demoDescription: `基本的时间轴。`,
      demoDescription_en: `Basic timeline.`,
    },
    {
      demo: StatusComponent,
      codePath: `showcase/timeline/status/status.component`,
      demoTitle: `状态类型`,
      demoTitle_en: `Status type`,
      demoDescription: `不同状态，颜色区分：绿色用于已完成、成功状态，红色表示告警或错误状态（告警色值参考色彩中的告警状态色）。`,
      demoDescription_en: `Different status, color distinction: Green is used for completed and successful status, red represents alarm or error status (the alarm color value refers to the alarm status color in the color).`,
    },
    {
      demo: ReverseComponent,
      codePath: `showcase/timeline/reverse/reverse.component`,
      demoTitle: `排序`,
      demoTitle_en: `Reverse`,
      demoDescription: `lvReverse 属性用于控制节点排序，为 false 时按正序排列，为 true 时按倒序排列。`,
      demoDescription_en: `The lvReverse attribute is used to control the sorting of nodes. When it is false, it is arranged in positive order, and when it is true, it is arranged in reverse order.`,
    },
    {
      demo: CustomDotComponent,
      codePath: `showcase/timeline/custom-dot/custom-dot.component`,
      demoTitle: `自定义时间轴节点`,
      demoTitle_en: `Custom timeline node`,
      demoDescription: `可自定义更换icon和其他自定义元素。`,
      demoDescription_en: `Customizable replacement icon and other custom elements.`,
    },
    {
      demo: ModeComponent,
      codePath: `showcase/timeline/mode/mode.component`,
      demoTitle: `时间轴展示模式`,
      demoTitle_en: `Timeline display method`,
      demoDescription: `时间轴支持左侧轴点、右侧轴点、交替展示、平铺展示以及自定义5种展示模式。自定义模式配置参见自定义位置Demo。`,
      demoDescription_en: `The timeline supports five display modes: left pivot point, right pivot point, alternating display, tiled display, and customization. For custom mode configuration, see Custom Location Demo.`,
    },
    {
      demo: CustomPositionComponent,
      codePath: `showcase/timeline/custom-position/custom-position.component`,
      demoTitle: `自定义位置`,
      demoTitle_en: `Custom-position Position`,
      demoDescription: `可以为每一项自定义位置。`,
      demoDescription_en: `The position can be customized for each item.`,
    },
    {
      demo: ComplexComponent,
      codePath: `showcase/timeline/complex/complex.component`,
      demoTitle: `复杂场景`,
      demoTitle_en: `Complex scene`,
      demoDescription: `可自定义所有节点样式，适配更为复杂的使用场景。`,
      demoDescription_en: `All node styles can be customized to adapt to more complex usage scenarios.`,
    },
  ],
  snippet: `
    <lv-timeline>
      <lv-timeline-item [lvTime]="\${1:time}">张珊(19928928) 审批进行中</lv-timeline-item>
      <lv-timeline-item [lvTime]="\${1:time}">张珊(19928928) 审批进行中</lv-timeline-item>
      <lv-timeline-item [lvTime]="\${1:time}">张珊(19928928) 审批进行中</lv-timeline-item>
    </lv-timeline>
    `,
  mApi: [
    {
      name: 'lv-timeline',
      name_en: 'lv-timeline',
      selector: 'lv-timeline',
      api: [
        {
          attribute: `lvFormat`,
          type: `string`,
          default: `yyyy-MM-dd HH:mm:ss`,
          description: `日期的显示格式，用法可参见 Angular DatePipe，只在 lvTime 为 Date 类型或时间戳格式的 number 类型时生效`,
          description_en: `The date display format, For usage, see Angular DatePipe, Only takes effect when lvTime is of Date type`,
        },
        {
          attribute: `lvReverse`,
          type: `boolean`,
          default: `false`,
          description: `节点排序`,
          description_en: `Node sorting`,
        },
        {
          attribute: `lvMode`,
          type: `'left' | 'right' | 'alternate' | 'tiled' | 'customize'`,
          default: `left`,
          description: `可以改变时间轴和内容的相对位置`,
          description_en: `You can change the relative position of the timeline and the content`,
        },
      ],
    },
    {
      name: 'lv-timeline-item',
      name_en: 'lv-timeline-item',
      selector: 'lv-timeline-item',
      api: [
        {
          attribute: 'lvTime',
          type: `Date | string | number | TemplateRef<void>`,
          default: '--',
          description: '时间',
          description_en: 'Time',
        },
        {
          attribute: 'lvType',
          type: `'normal' | 'info' | 'success' | 'warning' | 'error'`,
          default: 'normal',
          description: `时间轴类型节点类型`,
          description_en: `Time axis type node type`,
        },
        {
          attribute: 'lvPosition',
          type: `'left' | 'right' | 'tiled'`,
          default: 'left',
          description: `自定义时间轴节点位置，仅当 lvMode 为 customize 时有效`,
          description_en: `Customize the position of the timeline node, which is only valid when lvMode is customize`,
        },
        {
          attribute: 'lvDot',
          type: 'string | TemplateRef<void>',
          default: '--',
          description: '自定义时间轴点',
          description_en: 'Custom timeline points',
        },
      ],
    },
  ],
};
